<template>
	<div class="container" style="height: unset;">
		<el-card class="box-card">
			<el-button type="primary" @click="goback()">返  回</el-button>
			<el-button type="success" icon="el-icon-plus" @click="ruku">入  库</el-button>
			<el-button icon="el-icon-download" type="warning" @click="download">导  出</el-button>
			<div class="rightdiv">
				<el-select v-model="form.checkcategory_id" filterable placeholder="选择所属单位分类"
					style="width:160px;margin-right:10px;" clearable>
					<el-option v-for="item in cates" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-input placeholder="请输入" v-model="form.comname" class="filterinput" clearable>
					<template slot="prepend">单位名称</template>
				</el-input>

				<el-select v-model="form.status" filterable placeholder="请选择状态" style="width:130px;margin-right:10px;"
					clearable>
					<el-option label="全部" :value="0"></el-option>
					<el-option label="在库" :value="1"></el-option>
					<el-option label="出库" :value="2"></el-option>
					<el-option label="损耗" :value="3"></el-option>
				</el-select>

				<el-button type="primary" @click="flitercase()">筛  选</el-button>
			</div>
		</el-card>
		<el-card class="box-card" style="margin-top: 10px;">
			<el-table :data="list" style="width: 100%">
				<el-table-column align="center" label="序 号" prop="id" width="70"></el-table-column>
				<el-table-column align="center" label="所属单位">
					<template slot-scope="scope">
						{{scope.row.checkcategory.name}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="单位名称">
					<template slot-scope="scope">
						{{scope.row.company.comName}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="物资名称">
					<template slot-scope="scope">
						{{scope.row.material_list.name}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="物资分类">
					<template slot-scope="scope">
						{{scope.row.goods.name}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="入库数量" prop="income_warehouse"></el-table-column>
				<el-table-column align="center" label="出库数量" prop="leave_warehouse"></el-table-column>
				<el-table-column align="center" label="库存数量" prop="warehouse"></el-table-column>
				<el-table-column align="center" label="损耗数量" prop="loss_warehouse"></el-table-column>
				<el-table-column align="center" label="具体位置">
					<template slot-scope="scope">
						{{scope.row.company.address}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="联系人">
					<template slot-scope="scope">
						{{scope.row.company.leader}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="联系电话">
					<template slot-scope="scope">
						{{scope.row.company.leaderPhone}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="操  作" width="180">
					<template slot-scope="scope">
						<el-button size="small" type="primary"
							@click="openflow(scope.row.goods.id,scope.row.material_list.id,scope.row.checkcategory.id,scope.row.company.id,scope.row.id)">
							物资流向</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :page-sizes="[1,5,10,20]" style="margin-top:20px;" background
				layout="sizes,prev, pager, next" :total="total" @current-change="pagechg" :page-size="pagesize"
				@size-change="handleSizeChange" />
		</el-card>
		<el-dialog title="物资流向追溯" :visible.sync="dialogVisible" width="80%" :append-to-body="true">
			<div class="digarr">
				<span class="tabletitle" style="margin-top: 0;">入库动态</span>
				<el-table stripe border :data="arr1" style="width: 100%"
					:header-cell-style="{background:'#03a9f4a1',color:'#fff'}">
					<el-table-column type="index" label="序 号" width="60" align="center"></el-table-column>
					<el-table-column align="center" label="入库时间" prop="created_at"></el-table-column>
					<el-table-column align="center" label="入库数量" prop="number"></el-table-column>
					<el-table-column align="center" label="经办人">
						<template slot-scope="scope">
							{{scope.row.users.name}}
						</template>
					</el-table-column>
				</el-table>
				<span class="tabletitle">出库动态</span>
				<el-table stripe border :data="arr2" style="width: 100%"
					:header-cell-style="{background:'#03a9f4a1',color:'#fff'}">
					<el-table-column type="index" label="序 号" width="60" align="center"></el-table-column>
					<el-table-column align="center" label="出库时间" prop="created_at"></el-table-column>
					<el-table-column align="center" label="出库数量" prop="number"></el-table-column>
					<el-table-column align="center" label="出库事由">
						<template slot-scope="scope">
							{{scope.row.warehouse_outbound.cause}}
						</template>
					</el-table-column>
					<el-table-column align="center" label="申请人">
						<template slot-scope="scope">
							{{scope.row.warehouse_outbound.applicant}}
						</template>
					</el-table-column>
					<el-table-column align="center" label="经办人">
						<template slot-scope="scope">
							{{scope.row.warehouse_outbound.users.name}}
						</template>
					</el-table-column>
				</el-table>
				<span class="tabletitle">归还记录</span>
				<el-table stripe border :data="arr3" style="width: 100%"
					:header-cell-style="{background:'#03a9f4a1',color:'#fff'}">
					<el-table-column type="index" label="序 号" width="60" align="center"></el-table-column>
					<el-table-column align="center" label="归还时间" prop="created_at"></el-table-column>
					<el-table-column align="center" label="归还数量" prop="number"></el-table-column>
					<el-table-column align="center" label="归还人" prop="applicant"></el-table-column>
					<el-table-column align="center" label="经办人">
						<template slot-scope="scope">
							{{scope.row.users.name}}
						</template>
					</el-table-column>
				</el-table>
				<span class="tabletitle">报废记录</span>
				<el-table stripe border :data="arr4" style="width: 100%"
					:header-cell-style="{background:'#03a9f4a1',color:'#fff'}">
					<el-table-column type="index" label="序 号" width="60" align="center"></el-table-column>
					<el-table-column align="center" label="报损时间" prop="created_at"></el-table-column>
					<el-table-column align="center" label="报损数量" prop="number"></el-table-column>
					<el-table-column align="center" label="报损人">
						<template slot-scope="scope">
							{{scope.row.warehouse_outbound.applicant}}
						</template>
					</el-table-column>
				</el-table>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button icon="el-icon-download" type="warning" @click="download2">导 出</el-button>
				<el-button type="primary" @click="closeflow">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				cates: [],
				page: 1,
				pagesize: 10,
				total: 1,
				form: {
					comname: null,
					status: 0,
					checkcategory_id: null
				},
				dialogVisible: false,
				arr1: [],
				arr2: [],
				arr3: [],
				arr4: [],
				flowform:null
			}
		},
		props: { mid: Number },
		mounted() {
			this.getcheckcategory()
			this.getdetails()
		},
		methods: {
			ruku(){
				window.location.href="/admin/warehouse/referweb"
			},
			closeflow(){
				this.dialogVisible = false
				this.arr1 = []
				this.arr2 = []
				this.arr3 = []
				this.arr4 = []
			},
			getcheckcategory() {
				axios.get('/admin/stock/checkcategory_all').then(res => {
					this.cates = res.data.data
				}).catch(function(err) {
					console.log(err)
				})
			},
			// ie和浏览器兼容模式会有问题，可以用下面代码调试。
			openDownloadXLSXDialog(url, saveName) {
				//下载模板文件
				if (typeof url == "object" && url instanceof Blob) {
					url = URL.createObjectURL(url); // 创建blob地址
				}
				var aLink = document.createElement("a");
				aLink.href = url;
				aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
				var event;
				if (window.MouseEvent) event = new MouseEvent("click");
				else {
					event = document.createEvent("MouseEvents");
					event.initMouseEvent(
						"click",
						true,
						false,
						window,
						0,
						0,
						0,
						0,
						0,
						false,
						false,
						false,
						false,
						0,
						null
					);
				}
				aLink.dispatchEvent(event);
			},
			download() {
				let form = {
					material_id: this.mid
				}
				if (this.form.status != 0) {
					form.status = this.form.status
				}
				if (this.form.checkcategory_id) {
					form.checkcategory_id = this.form.checkcategory_id
				}
				if (this.form.comname) {
					form.comname = this.form.comname
				}
				axios.post('/admin/stock/stockexportone',form).then(res => {
					console.log(res.data.url)
					this.openDownloadXLSXDialog(res.data.url);
				}).catch(function(err) {
					console.log(err)
				})
				
			},
			download2() {
				axios.post('/admin/stock/trend_exportone',this.flowform).then(res => {
					console.log(res.data.url)
					this.openDownloadXLSXDialog(res.data.url);
				}).catch(function(err) {
					console.log(err)
				})
				
			},
			flitercase() {
				this.page = 1
				this.getdetails()
			},
			getdetails() {
				let form = {
					limit: this.pagesize,
					page: this.page,
					material_id: this.mid
				}
				if (this.form.status != 0) {
					form.status = this.form.status
				}
				if (this.form.checkcategory_id) {
					form.checkcategory_id = this.form.checkcategory_id
				}
				if (this.form.comname) {
					form.comname = this.form.comname
				}
				axios.get('/admin/stock/stocklistdata', { params: form }).then(res => {
					this.list = res.data.data
					this.total = res.data.count
				}).catch(function(err) {
					console.log(err)
				})
			},
			pagechg(e) {
				this.page = e
				this.getdetails()
			},
			handleSizeChange(e) {
				this.pagesize = e
				this.getdetails()
			},
			openflow(goods_id, material_id, checkcategory_id, company_id,stock_id) {
				this.arr1 = []
				this.arr2 = []
				this.arr3 = []
				this.arr4 = []
				this.flowform={goods_id, material_id, checkcategory_id, company_id,stock_id}
				axios.get('/admin/stock/materials_trend', {
					params:this.flowform
				}).then(res => {
					this.arr1 = res.data.data.newly_increased
					this.arr2 = res.data.data.outbound
					this.arr3 = res.data.data.revert
					this.arr4 = res.data.data.scrap
				}).catch(function(err) {
					console.log(err)
				})
				this.dialogVisible = true
			},
			goback(){
				window.history.go(-1)
			}
		}
	}
</script>

<style>
	.el-dialog__body {
		padding: 3px 20px !important;
	}

	.caseicon1 {
		font-size: 16px;
		font-weight: bold;
		margin-right: 4px;
		color: #07c160;
	}

	.caseicon2 {
		font-size: 16px;
		font-weight: bold;
		margin-right: 4px;
		color: #dee1e6;
	}

	.filterinput {
		margin-right: 10px;
		width: 200px;
	}

	.el-input-group__append,
	.el-input-group__prepend {
		padding: 0 5px !important;
	}

	.rightdiv {
		z-index: -100;
		width: auto;
		height: 100%;
		float: right;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.digarr {
		height: 400px;
		overflow: auto;
	}

	.tabletitle {
		width: 100%;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		font-weight: bold;
		color: #666;
		margin-top: 20px;
		margin-bottom: 10px;
	}
</style>
